<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Diffusion Trade Screen demo" />
<meta name="author" content="dhudson@pushtechnology.com" />
<meta name="&copy; 2008 Push Technology" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link rel="stylesheet" type="text/css" href="/demos/css/diffusion.css" />
<link rel="stylesheet" type="text/css" href="/demos/css/ConnectionWidget.css" />
<style type="text/css">
.priceUp {
	background-image: url('images/Up.gif');
	background-position: center;
	background-repeat: no-repeat;
}

.priceDown {
	background-image: url('images/Down.gif');
	background-repeat: no-repeat;
	background-position: center;
}
</style>
<title>Trade Demo</title>

<!--  This is a high level comment  -->
<script type="text/javascript" src="/lib/DIFFUSION/diffusion.js"></script>

<script type="text/javascript">

	resetRows();

  	function resetRows() {
		// Reset row background colours
		for(var i=0; i < 24; i++) {
			var tr = document.getElementById(i);
			if(i % 2 == 0) {
				tr.style.backgroundColor = 'white';
				tr.cells[2].style.backgroundColor = 'white';
			} else {
				tr.style.backgroundColor = '#EFF3FB';
				tr.cells[2].style.backgroundColor = '#EFF3FB';
			}
		}
	}
	
	function onDataEvent(webClientMessage)
	{	

		DiffusionClient.trace(webClientMessage.getBody());
		
		// Process Timestamp
		var stamp = document.getElementById("Timestamp");
		stamp.innerHTML = webClientMessage.localeTimeString();

		for(var i=0; i < webClientMessage.getNumberOfRecords(); i++) {
			var data = webClientMessage.getFields(i);

			var tr = document.getElementById(data[0]);
			var netChange = data[2];
			var oldValue = parseInt(tr.cells[2].innerHTML);
			
			// Process row change
			tr.cells[2].innerHTML = data[1];
			tr.cells[4].innerHTML = netChange;

			var imageCell = tr.cells[3];
			
			if(webClientMessage.isDeltaMessage()) {
				if(oldValue > data[1]) {
					tr.cells[2].style.backgroundColor = 'red';
					imageCell.className = 'priceDown';
				} else {
					tr.cells[2].style.backgroundColor = '#00B5EF';
					imageCell.className = 'priceUp';
				}
				setTimeout("resetRows()",1500);
			} else {
				if(netChange > 0) {
					imageCell.className = 'priceUp';
				} else {
					imageCell.className = 'priceDown';
				}
			}
		}
	}
  </script>
</head>

<body>
<div>
	<img src="images/title1.gif" width="100%" />
</div>
<div align="center">
<table border=1 width="80%">
	<tr>
		<th align="left" colspan="2">CONTRACT</th>
		<th align="center" colspan="2">LAST</th>
		<th align="right" nowrap>NET CHGE</th>
	</tr>
	<tr>
		<td colspan="5" height="1" bgcolor="#FFFFFF"></td>
	</tr>
	<tr id="0">
		<td width="25%" align="left">S&P 500</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="1">
		<td width="25%" align="left">E-MINI</td>
		<td width="20%" align="left">SEP06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td id="1" width="25%" align="right"></td>
	</tr>
	<tr id="2">
		<td width="25%" align="left">NSDQ100</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="3">
		<td width="25%" align="left">E-NASDAQ</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="4">
		<td width="25%" align="left">E-ND CMP</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="5">
		<td width="25%" align="left">BIOTECH</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="6">
		<td width="25%" align="left">NIKKEI</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="7">
		<td width="25%" align="left">NK YEN</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="8">
		<td width="25%" align="left">RUSSELL</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="9">
		<td width="25%" align="left">E-RUSSEL</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="10">
		<td width="25%" align="left">RSL 1000</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="11">
		<td width="25%" align="left">E-MIDCAP</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="12">
		<td width="25%" align="left">GSCI</td>
		<td width="20%" align="left">SEP06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="13">
		<td width="25%" align="left">GSCI ER</td>
		<td width="20%" align="left">MAR11</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="14">
		<td width="25%" align="left">MSCIEAFE</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="15">
		<td width="25%" align="left">S&P GROW</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="16">
		<td width="25%" align="left">S&P VALU</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="17">
		<td width="25%" align="left">S&P FNCL</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="18">
		<td width="25%" align="left">S&P TECH</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="19">
		<td width="25%" align="left">SMALLCAP</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="20">
		<td width="25%" align="left">S&P ASIA</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="21">
		<td width="25%" align="left">ND ETF</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="22">
		<td width="25%" align="left">S&P ETF</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
	<tr id="23">
		<td width="25%" align="left">RUSL ETF</td>
		<td width="20%" align="left">DEC06</td>
		<td width="20%" align="right"></td>
		<td width="10%" align="center"></td>
		<td width="25%" align="right"></td>
	</tr>
</table>
</div>
<br>
<p>Last message received&nbsp;<b><i><span id="Timestamp"></span></i></b></p>
<br>
<div id="DiffusionContainer">
<script type="text/javascript">
	var connectionDetails = {
		topic : "Trade",
		onDataFunction : onDataEvent
	};

	DiffusionClient.connect( connectionDetails);

</script>
</div>
</body>
</html>
